<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Login Page</title>
        <link type="text/css" rel="stylesheet" href="css/mycss.css"/>
    </h:head>
    <h:body>
        <p:layout fullPage="true" >
          <p:layoutUnit position="center" >  
        <style>
            p { 
                position: relative;
                color: black;
                font: x-large/200% "Century Gothic", serif;
                left: 21em;
            width: 50%;}
        </style>
        <p> Welcome to Meteo Calendar! </p>
        
        <h:form id="loginform">
          
            <p:panel header="Login" style="width: 400px; margin: auto; border-width: 5px; border-style: double; border-color: black">
                <p:panelGrid styleClass="section-login" columns="1" style="margin: auto; border-style: solid; border-color: black">
                    <p:row>
                        <p:outputLabel for="username" value="UserName" style="color: black"/>
                        <p:inputText id="username" value="#{loginbean.username}" 
                                required="true" >
                        </p:inputText>
                        <p:message id="usernamemsg" for="username"/>
                    </p:row>
                    <p:row>
                        <h:outputLabel for="password" value="Password  " style="color: black" />
                        <p:password id="password" value="#{loginbean.password}" 
                               required="true"  />
                        <p:message id="passwordmsg" for="password" />
                    </p:row>
                    </p:panelGrid>
                
                <p:commandButton styleClass="login2" style="background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); border: double; margin-left: 5em; margin-bottom: 0.1em; margin-top: 0.7em; color: black" id="submit" action="#{loginbean.login()}" value="Login" ajax="true" update="@all"/>
                 
                 
            </p:panel>
            
            <p:button style="position:absolute; height: 80px; width: 200px; bottom: 0.1em; right: 0.3em; background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); color: black; border-style: solid; border-width: 3px; border-color: black" outcome="registration" value="Sign up Page"/>
        
        </h:form>
        </p:layoutUnit>
      </p:layout>
       
    </h:body>
    
    <h:body>
     <h1>Prova WebSocket</h1>
        <div id="output"></div>
    <script type="text/javascript" src="websocket.js"></script>
</h:body>
    
</html>

